/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<!-- 我的关注 -->
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">我的关注</b>
      <b class="right" @click="moreProject()">更多项目<i class="iconfont icon-arrow-double-right"></i></b>
    </p>
    <div class="item" v-for="(item, index) in followData" :key="index" @click="goProject(item)">
      <p class="name">{{item.title}}</p>
      <ul class="main">
        <li>
          <h3><countup :end-val="Number(item.userSigned) || 0" :duration="2" :decimals="0" ></countup></h3>
          <p>{{getSlectedName(selectedIndex)}}签约(户)</p>
        </li>
        <li>
          <h3><countup :end-val="Number(item.amountPayed) || 0" :duration="2" :decimals="2" ></countup></h3>
          <p>{{getSlectedName(selectedIndex)}}支出(万元)</p>
        </li>
        <li>
          <h3><countup :end-val="Number(item.percent*100) || 0" :duration="2" :decimals="2" ></countup>%</h3>
          <p>项目总进度</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Countup } from 'vux';

export default {
  props:{
    followData: Array,
    selectedIndex: Number
  },
  data() {
    return {};
  },
  mounted() {
    console.log("followData", this.followData)
  },
  methods: {
    moreProject(){
      this.$router.push({path: '/projectList'})
    },
    goProject(item){
      this.$router.push({name: 'project', query: {seqno: item.seqno}})
    },
    getSlectedName(index){
      let names = ['今日', '周', '月', '年']
      return names[index];
    }
  },
  components: { Countup }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";
.item {
    padding-bottom: 8px;
    border-bottom: 1px solid @border-base;
    margin-bottom: 10px;

    &:last-child {
      border: none;
    }

    .name {
      font-size: 12px;
      color: @font-primary;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 10px;
    }


  }
ul {
  .mix-flex-center();

  li {
    flex: 1;
    .mix-flex-center();
    flex-direction: column;

    h3 {
      font-size: 16px;
      color: @primary;
    }

    p {
      font-size: 12px;
      color: @font-regular;
    }
  }
}

</style>
